Day22:Vue.js（四）

第 12 屆 iThome 鐵人賽

DAY 22

Modern Web

小白的JavaScript讀書日記系列第 22 篇

12th鐵人賽

q20038848

2020-09-23 09:21:50

752 瀏覽

分享至

Vue.js v3.0 再2020/9/18正式發布了！不知道團隊是不是海賊王的粉，codename竟然叫『One Pieces 』ＸＤ
Vue.js News有興趣的朋友可以看看～

v-on 事件綁定

Vue.js與事件相關的指令只有一個v-on，最常見的方式是`v-on:[事件名稱]="運算式"

<body>
    <div id="demo">
        <p>PS5要買幾台: {{count}}</p>
        <button v-on:click="count++">+1</button>
    </div>
    <script>
        const vm = Vue.createApp({
          data() {
              return{
                  count: 0
              }
          },
        }).mount('#demo');
      </script>
  </body>

上述範例中click=事件名稱；"count++"=運算式，組合起來就是這段程式碼:
<button v-on:click="count++">+1</button>。
也可以用methods改寫:

<body>
    <div id="demo">
        <p>PS5要買幾台: {{count}}</p>
        <button v-on:click="plus">+1</button>
    </div>
    <script>
        const vm = Vue.createApp({
          data() {
              return{
                  count: 0
              }
          },
          methods:{
              plus(){
                  this.count++;
              }
          }
        }).mount('#demo');
      </script>
  </body>

個人覺得用methods來改寫可讀性高於上面的例子，這樣HTML看起來會比較乾淨一點。
v-on也有提供縮寫，將v-on:用@取代，以上面的例子來說v-on:click="plus"可以縮寫成@click="plus"。

v-on與event
使用v-on如何取得event呢? 當v-on被觸發的時候，如果沒有預設參數，預設就會將event物件當參數傳入，如果再methods需要傳入參數，可以再模板中指定傳入$event:

<body>
    <div id="demo">
        <p><input v-model.number="amount"></p>
        <p>PS5要買幾台: {{count}}</p>
        <button @click="plus(amount, $event)">加入購物車</button>
    </div>
    <script>
        const vm = Vue.createApp({
          data() {
              return{
                  count: 0,
                  amount:0
              }
          },
          methods:{
              plus(amount,event){
                  this.count+=amount;
              }
          }
        }).mount('#demo');
      </script>
  </body>

上述範例可以觀察到，button取得的是再input裡面的物件，以範例來說，只有再input輸入數字，按下button才會累加。

v-on與它修飾子夥伴

.stop: 作用如event.stopPropagation()，用來阻擋事件冒泡。
.prevent:作用如event.preventDefault()，用來阻擋元素的預設行為。
.captur:作用是指定事件已捕獲的形式來觸發，與事件冒泡的方向相反。
.self:作用只觸發自己範圍內的事件，不包含子元素。
.once:只會觸發一次。
這邊的範例可以參照以下的網址，應該會有更深的體驗!
Kuro
Summer 桑默

滑鼠修飾子

.left
.right
.middle

<body>
    <div id="demo">
        <button @click.right="inner">click me</button>
    </div>
    <script>
        const vm = Vue.createApp({
          methods:{
            inner(){
                alert(`I'm Button`)
            }
          }
        }).mount('#demo');
      </script>
  </body>

正常預設都是滑鼠左鍵觸發，上述程式碼，我們用click.right將它設定成右鍵才觸發，這部分可以自己玩看看呦(改成中鍵之類的~

今日總結

v-on事件綁定與它的修飾子夥伴
今天的內容可以搭配上面提供的網址服用...原諒小白我還不是很清楚那邊的概念，
以及冒泡事件也可以參閱Kuro 大神的:
重新認識 JavaScript: Day 14 事件機制的原理，我正跪著拜讀中...
感謝網路上提供各種資源以及分享知識的大大讓小白有書念啊Q_Q

明天繼續囉~